<template>
<el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width="560px"
    @open="handleDialogOpen()" v-loading="loading">
    <div slot="title" class="dialog-header">{{ dialogProps.title }}</div>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :model="vipdaTj" :rules="formMembers" ref="TmemberForm" label-width="320px" label-position="right" size="small">
            &emsp;<span>档案号</span>
            <input v-model="vipdaTj.member.fileNumber" :disabled="true"/>
            &emsp;&emsp;&emsp;
            <span>身份证</span>
            <input v-model="vipdaTj.member.idCard" onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')"/><br><br>
            <span>登录密码</span>
            <input v-model="vipdaTj.member.password"/>
            &emsp;&emsp;&emsp;
            <span>手机号</span>
            <input v-model="vipdaTj.member.phoneNumber"/><br><br>
            &emsp;&emsp;<span>姓名</span>
            <input v-model="vipdaTj.member.name"/>
            &emsp;&emsp;&emsp;
            &emsp;<span>性别</span>
              <el-radio v-model="vipdaTj.member.sex" label="男">男</el-radio>
              <el-radio v-model="vipdaTj.member.sex" label="女">女</el-radio>
              <br><br>
            &emsp;&emsp;<span>年龄</span>
            <input v-model="vipdaTj.member.age"/>
            &emsp;&emsp;
            <span>出生日期</span>
            <input type="date" v-model="vipdaTj.member.birthday"/><br><br>
            &emsp;&emsp;<span>邮箱</span>
            <input v-model="vipdaTj.member.email"/>
            &emsp;
            <span>健康管理师</span>
              <el-select style="width: 165px" v-model="vipdaTj.member.healthMgrId">
                <el-option
                    v-for="item in parentTmemberList"
                    :key="item.id"
                    :label="item.healthMgrName"
                    :value="item.healthMgrId">
                </el-option>
              </el-select>
            <br><br>
              &emsp;&emsp;<span>职业</span>
              <input v-model="vipdaTj.tmemberinfo.job"/>
              &emsp;&emsp;&emsp;
              &emsp;<span>籍贯</span>
              <input v-model="vipdaTj.tmemberinfo.nativePlace"/><br><br>
              <span>婚姻状态</span>
              <select v-model="vipdaTj.tmemberinfo.maritalStatus" style="width: 165px">
                <option value="0">已婚</option>
                <option value="1">未婚</option>
              </select>
              &emsp;&emsp;&nbsp;<span>文化程度</span>
              <input v-model="vipdaTj.tmemberinfo.educationDegree"/><br><br>
              &emsp;&emsp;
              <span>档案状态</span>
              <select v-model="vipdaTj.tmemberinfo.status">
                <option value="0">启用</option>
                <option value="1">禁用</option>
              </select><br><br>
            &emsp;&emsp;
            <span>备注</span>
            <textarea style="width: 420px;height: 70px" v-model="vipdaTj.member.remark"/><br><br>
            </el-form>
           </el-tab-pane>
          <el-tab-pane label="动态信息" name="second">
            <el-form :model="vipdaTj" label-width="320px" label-position="right" size="small">
              &emsp;&emsp;<span>身高</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.height"/>
              &emsp;&emsp;&emsp;
              &emsp;<span>体重</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.weight"/><br><br>
              &emsp;<span>舒张压</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.dbp"/>
              &emsp;&emsp;
              &emsp;<span>收缩压</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.sbp"/><br><br>
              &emsp;&emsp;<span>呼吸</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.breth"/>
              &emsp;&emsp;&emsp;
              &emsp;<span>体温</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.thermometer"/><br><br>
              &emsp;&emsp;<span>腰围</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.waistline"/>
              &emsp;&emsp;&emsp;
              &emsp;<span>臀围</span>
              <input v-model="vipdaTj.tmemberdynamicinfo.hipline"/><br><br>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="病史" name="third">
            <el-form :model="vipdaTj" label-width="320px" label-position="right" size="small">
            <span>既往史</span>
            <textarea style="width: 420px;height: 70px" v-model="vipdaTj.tmembermedicalhistory.previousHistory"/><br><br>
              <span>家族史</span>
              <textarea style="width: 420px;height: 70px" v-model="vipdaTj.tmembermedicalhistory.familyHistory"/><br><br>
              <span>过敏史</span>
              <textarea style="width: 420px;height: 70px" v-model="vipdaTj.tmembermedicalhistory.allergicHistory"/><br><br>
              &emsp;<span>病史</span>
              <textarea style="width: 420px;height: 70px" v-model="vipdaTj.tmembermedicalhistory.medicalHistory"/><br><br>
              <span>慢性病</span>
              <textarea style="width: 420px;height: 70px" v-model="vipdaTj.tmembermedicalhistory.chronicDisease"/><br><br>
            </el-form>
          </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleDialogClose()">取 消</el-button>
        <el-button type="primary" size="small" @click="submitForm('TmemberForm')">确 定</el-button>
    </span>
</el-dialog>
</template>

<script>
import {MemberUpd,Memberadd} from '@/api/Member_Profile_tj'
export default {
  name: "member-edit",
   props: ['parentTmemberList'],
   data() {
     return {
        loading: false,
        activeName: 'first',
        vipdaTj: {
          //会员表
          member:{
            fileNumber:'',
            idCard:'',
            phoneNumber:'',
            regTime:'',
            password:'',
            createtime:'',
            name:'',
            sex:'',
            birthday:'',
            age:'',
            healthMgrId:'',
            email:'',
            remark:''
          },
          //详情表
          tmemberinfo:{
            job:'',
            nativePlace:'',
            maritalStatus:'',
            educationDegree:'',
            status:''
          },
          //动态信息表
          tmemberdynamicinfo:{
            height:'',
            weight:'',
            dbp:'',
            sbp:'',
            breth:'',
            thermometer:'',
            waistline:'',
            hipline:''
          },
          //病史表
          tmembermedicalhistory:{
            previousHistory:'',
            familyHistory:'',
            allergicHistory:'',
            medicalHistory:'',
            chronicDisease:''
          },
          tInterposeFollowupVisit:{}
          },
      healthMgrName:[],
      dialogProps: {
        visible: false,
        action: '',
        title: ''
      },
      formMembers: {
        fileNumber: [
          { required: true, message: '请输入档案号', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入登录密码', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
         sex: [
          { required: true, message: '请输入性别', trigger: 'blur' },
        ],
        age: [
          { required: true, message: '年龄', trigger: 'blur' },
        ],
        idCard:[
           { required: true, message: '请输入证件号', trigger: 'blur' },
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: '请输入正确的证件号'
          }
        ]
      }
    }
   },
   methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.dialogProps.action === 'add') {
            this.doSaveTmember()
          } else {
            this.doUpdateTmember()
            console.log(this.doUpdateTmember)
          }
        } else {
          return false
        }
      })
    },
    getItem(val){
        let obj={}
        obj=this.healthMgrName.find(item=>{
          return item.healthMgrId==val;
        })
    },
    doUpdateTmember() {
      this.loading = true
      MemberUpd(this.vipdaTj)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    doSaveTmember() {
      this.loading = true
      Memberadd(this.vipdaTj)
      .then(response => {
        this.loading = false
        this.dialogProps.visible = false
        this.$emit('save-finished')
      })
      .catch(error => {
        this.outputError(error)
      })
    },
    handleDialogClose() {
      this.dialogProps.visible = false
    },
    handleDialogOpen() {
      this.$nextTick(() => {
        this.$refs['TmemberForm'].clearValidate()
      })
    },
     handleClick(tab, event) {
      console.log(tab, event);
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
   },
   mounted: function() {
    this.$nextTick(() => {
      this.$on('openEditTmemberDialog', function(vipdaTj) {
          this.vipdaTj.member=vipdaTj.member
          this.vipdaTj.tmemberinfo=vipdaTj.tmemberinfo
          this.vipdaTj.tmemberdynamicinfo=vipdaTj.tmemberdynamicinfo
          this.vipdaTj.tmembermedicalhistory=vipdaTj.tmembermedicalhistory
        this.dialogProps.action = 'edit'
        this.dialogProps.title = '修改会员'
        this.dialogProps.visible = true
      })
      this.$on('openAddTmemberDialog', function() {
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加会员'
        this.dialogProps.visible = true
      })
    })
  }
}
</script>

<style>

</style>
